<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>单个广告详细报表</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/lib/flatpickr/flatpickr.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>
<div class="app-page">
    <div class="app-page-header">
        <div class="page-title">
            <div class="title">单个终端详细报表</div>
            <div class="btn-group">
                <a id="export-device-detail" class="z-btn z-primary">导出</a>
            </div>
        </div>
    </div>
    <div class="app-page-content">
        <div class="app-card z-mab">
            <div class="app-card-body">
                <!-- 过滤器 -->
                <form class="filter">
                    <div class="filter-group">
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">开始时间</div>
                                <div class="body">
                                    <input type="text" name="startTime" class="flatpickr-datetime">
                                </div>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item row">
                                <div class="label">结束时间</div>
                                <div class="body">
                                    <input type="text" name="endTime" class="flatpickr-datetime">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="filter-group">
	                     <div class="filter-item">
	                            <div class="form-item row">
	                                <div class="label">机器码</div>
	                                <div class="body">
	                                    <input type="text" name="deviceNum">
	                                </div>
	                            </div>
	                        </div>
	                        <div class="filter-item">
	                            <div class="form-item row">
	                                <div class="label">mac地址</div>
	                                <div class="body">
	                                    <input type="text" name="mac">
	                                </div>
	                            </div>
	                        </div>
	                     </div>
                    <div class="filter-group">
                    	<div class="form-item row">
                       	 <button class="z-btn z-primary">查询</button>
                       	 <div class="" style="color:red">&nbsp;&nbsp;请输入终端mac地址或终端机器码进行查询</div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-list-total z-mab">
                    <span>总计：<i><td th:text="${total}"></td></i></span>
                </div>

                <table class="z-table">
                    <thead>
                        <th>记录时间</th>
                        <th>机器码</th>
                        <th>mac</th>
                        <th>IP</th>
                        <th>机型</th>
                        <!-- <th>在线状态</th> -->
                        <th>分组</th>
                        <th>播放内容</th>
                        <th>mips版本</th>
                        <th>固件版本</th>
                    </thead>
                    <tbody>
                        <tr th:each="deviceDetail: ${deviceDetailList}">
                            <td th:text="${deviceDetail.timePointFormat}"></td>
                            <td th:text="${deviceDetail.deviceNum}"></td>
                            <td th:text="${deviceDetail.mac}"></td>
                            <td th:text="${deviceDetail.reportIp}"></td>
                            <td th:text="${deviceDetail.deviceModel}"></td>
                           <!--  <td>在线</td> -->
                            <td th:text="${deviceDetail.group}"></td>
                            <td th:text="${deviceDetail.currentPlayXcVersion}"></td>
                            <td th:text="${deviceDetail.currentDeviceSoftVer}"></td>
                            <td th:text="${deviceDetail.currentDeviceHardVer}"></td>
                        </tr>
                    </tbody>
                </table>
                <!-- 分页信息 -->
                <div class="app-card-body">
                    <!-- 前端分页 -->
                    <div class="pagination z-pat z-fr"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/lib/flatpickr/flatpickr.js}"></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //获取context path
    var context = $("meta[name='ctx']").attr("content");

    //处理查询信息及查询信息回显
    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);
    flatpickr.localize(flatpickr.l10ns.zh);
    flatpickr(".flatpickr-datetime", {
        enableTime: true,
        enableSeconds: true,
    });

    //处理分页
    var pageNum =  [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];
    var startTime = $("input[name='startTime']").val();
    var endTime = $("input[name='endTime']").val();
    var deviceNum = $("input[name='deviceNum']").val();
    var mac = $("input[name='mac']").val();
    var pagination = new Pagination(".pagination", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function(pageIndex) {
            window.location.href = context + "/report/listSingleDeviceReport?pageNum=" + pageIndex + "&pageSize=" + pageSize
                + "&startTime=" + startTime + "&endTime=" + endTime + "&deviceNum=" + deviceNum + "&mac=" + mac;
        }
    });

    //导出excel
    $('#export-device-detail').click(function () {
        window.location.href = context + "/export/exportSingleDeviceDetailReport?startTime=" + startTime + "&endTime=" + endTime + "&deviceNum=" + deviceNum + "&mac=" + mac;
    });
</script>
</body>

</html>